<template>
	<view>
		<view>
			<view class="flex b-s mt10 a-t" style="padding: 10px;">
				<view class="w33">
					<u-icon @click="qiehuan('left')" name="arrow-left"></u-icon>
				</view>
				<view class="w33 f16" style="text-align: center;">
					{{dates}}
				</view>
				<view class="w33" style="text-align: right;">
					<u-icon @click="qiehuan('right')" name="arrow-right"></u-icon>
				</view>
			</view>

			<view>
				<view class="flex">
					<view class="fb c777 f14" style="width: 14.2%;text-align: center;" v-for="(item,index) in mos">
						{{item}}
					</view>
				</view>
				<view class="flex" style="flex-wrap: wrap;">
					<view v-for="(item,index) in zhanwei" style="width: 14.2%; padding: 10px 0; text-align: center;">
						&nbsp;
					</view>
					<view @click="select(item.day)" :class="thisday-1==index?'riliactive':''" class="f14 c333" style="width: 14.2%;text-align: center;padding: 10px 0; " :style="{'background': item.aunt==item.day?'#fa1e8a':''}" v-for="(item,index) in day">
						{{item.day}}
						<view class="f12 c999">
							<!-- <view v-if="item.aunt==item.day" style="width: 8px;height: 8px;border-radius: 50%;background: #fa1e8a;margin: auto;"></view> -->
							<view  v-if="item.aunt_cast==item.day" style="width: 8px;height: 8px;border-radius: 50%;background:rgb(241,158,194);margin: auto;"></view>
							<view v-if="item.ovulation==item.day" style="width: 8px;height: 8px;border-radius: 50%;background:#800080;margin: auto;"></view>
						</view>
					</view>
				</view>
			</view>


		</view>
		<view style="width: 90%;margin: auto;">
			<input style="border: #fa1e8a solid 1px;height:36px;box-sizing: border-box;padding: 0 10px;border-radius: 6px;" type="text" v-model="remarks" @blur="blur" placeholder="添加备注">
		</view>
		<view class="flex a-t j-t">
			<view class="flex a-t">
				<view style="background: #fa1e8a;width: 10px;height: 6px;border-radius: 10px;"></view>
				<view class="f12" style="color:#fa1e8a;">
					姨妈期
				</view>
			</view>
			<view class="flex a-t" style="margin:10px;">
				<view style="background: rgb(241,158,194);width: 10px;height: 6px;border-radius: 10px;"></view>
				<view class="f12" style="color:rgb(241,158,194) ;">
					预计姨妈期
				</view>
			</view>
			<view class="flex a-t">
				<view style="background:#800080;;width: 10px;height: 6px;border-radius: 10px;color: #800080;"></view>
				<view class="f12" >
					排卵期
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	var myDate = new Date();
	var y = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
	var m = myDate.getMonth()+1;       //获取当前月份(0-11,0代表1月)
	var d = myDate.getDate();        //获取当前日(1-31)

	export default {
		data() {
			return {
				nian:'2022/8/4',
				dates:'',
				mos:['日','一','二','三','四','五','六'],
				day:[],
				zhanwei:[],
				thisday:'',
				yue:'',
				remarks:'',
				ds:0,
				tm:0,
				yimadata:[]
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#ffffff',
			})
			this.tm=m
			this.yue=m
		},
		mounted() {
			this.ds=uni.getStorageSync('has_come')
			this.dates=this.getdate()
			this.remarkss()
			// console.log(new Date("2022/7/28").getDay())
			// console.log(this.getday())

		},
		methods: {
			select(e){
				this.thisday=e
				d=e
				this.dates=y+'-'+m+'-'+d
				this.remarkss()
			},
			getdate(type){
				// if(this.yue>=12){
				// 	console.log('tingzhi')
				// 	return false
				// }
				// if(e==1){
				// 	return false
				// }

				if(type=='left'){
				    if(this.yue == 1){
                        y=y-1;
                        m=12
					}else{
                        m=this.yue-1
					}

					this.yue=m
				}
				if(type=='right'){
				    if(this.yue == 12){
                        y=y+1;
                        m=1;
					}else{
                        m=this.yue+1
                    }

					this.yue=m
					// if(this.yue>12){
					// 	this.yue=12
					// 	m=12
					// 	return false
					// }
				}

				this.thisday=d
				var lastDay=new Date(y,m,0).getDate()//获得是标准时间,需要getDate()获得天数
				myDate.setFullYear(y);
				myDate.setDate(d);
				myDate.setMonth(m)
				let n=myDate.getDay()
				this.zhanwei=[]
				for(let i=0;i<n;i++){
					this.zhanwei.push(i)
				}
				this.day=[]
				let m1=m<10?'0'+m:m
				let data={
					month:y+'-'+m1
				}
				this.$u.api.forecast(data).then((res)=>{
					if(this.tm==m){
						this.yimadata=res.aunt
					}
					for(let i=1; i<=lastDay;i++){
						let arr={
							day:i,
							aunt:'',
							ovulation:'',
							aunt_cast:''
							// yima:d-(this.ds-1)
						}
						this.day.push(arr)
					}
					if(this.tm!=m){
						for(let i in this.day){
							for(let t in this.yimadata){
								if(this.yimadata[t]==this.day[i].day){
									this.day[i].aunt_cast=this.yimadata[t]
									console.log(parseInt(i) ,'this.day[i+7]')
									this.day[parseInt(i)+7].ovulation=this.yimadata[t]+7
								}
							}
						}
						this.day=this.day
						return false
					}
					for(let i in this.day){
						for(let t in res.aunt){
							if(res.aunt[t]==this.day[i].day){
								this.day[i].aunt=res.aunt[t]
								console.log(parseInt(i) ,'this.day[i+7]')
								this.day[parseInt(i)+7].ovulation=res.aunt[t]+7
							}
						}
					}
					this.day=this.day
				})


				// this.forecast()
				return y+'-'+m1+'-'+d
			},
			qiehuan(e){
				if(e=='right'&this.yue>=12){
					// return false
				}
				if(e=='left'&this.yue<=1){
					// return false
				}
				this.dates=this.getdate(e)
				this.remarkss()
				this.forecast()
			},
			async forecast(){
				let m1=m<10?'0'+m:m
				let data={
					month:y+'-'+m1
				}
				let res = await this.$u.api.forecast(data)
				// this.day.forEach((item,index)=>{
				// 	// item.aunt=res.
				// })
				for(let i in this.day){
					for(let t in res.aunt){
						if(res.aunt[t]==this.day[i].day){
							this.day[i].aunt=res.aunt[t]
						}
					}
				}
				this.day=this.day
			},
			async remarkss(){
				let m1=m<10?'0'+m:m
				let data={
					month:y+'-'+m1
				}
				let res = await this.$u.apis.remarks(data)
				if(res.length>0){
					let m1=m<10?'0'+m:m
					let d1=d<10?'0'+d:d
					let ds=y+'-'+m1+'-'+d1
					for(let i in res){
						if(ds==res[i].date){
							return this.remarks=res[i].remarks
						}else{
							this.remarks=''
						}
					}
				}else{
					this.remarks=''
				}
			},
			async blur(){
				let data={
					date:this.getdate(),
					remarks:this.remarks
				}
				let res = await this.$u.apis.addremark(data)
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
.riliactive{ background: #fa1e8a;color: #fff !important;opacity: 0.7;}
.riliactive1{ background: #fa1e8a;color: #fff !important;}
.riliactive .c999{color: #fff !important;}
.yueactive{ border-radius: 50%;border: #59A39C solid 1px;color: #59A39C;}
</style>
